import React, { Component } from 'react'
import { Icon } from 'antd';
import './header.scss'



export default class index extends Component {
    render() {
        return (
            <div className="header">
                <div className="main clearflx">
                    <div className="address_box fl">
                        {/* 地区下面的弹窗 */}
                        {/* <div className="more_address_box">
                            <p className="clearflx">
                                <span className="fl">请选择你的地区</span>
                                <span className="fr"><Icon type="close" /></span>
                            </p>     
                            <div>
                            <Tabs  type="card">
                                <TabPane tab="Tab 1" key="1"  tabBarStyle={{width:'200px'}}>
                                Content of Tab Pane 1
                                </TabPane>
                                <TabPane tab="Tab 2" key="2">
                                Content of Tab Pane 2
                                </TabPane>
                            </Tabs>
                            </div>
                        </div> */}
                        {/* 选择的地区 */}
                        <span className="address">
                            长沙市
                        </span>
                        <span>
                            <Icon type="caret-down" />
                        </span>
                    </div>
                    <ul className="fr">
                        <li className="loginbox">
                            <a href="/">请登录</a><span>/</span>
                            <div className="top-nav-dis">
                                <div className="top">
                                    <span></span>
                                    <div className="login fr">
                                        您好 !<a href="/">请[登录]</a>
                                    </div>
                                </div>
                                <div className="collect">
                                    <a href="/"><span>我的收藏</span></a>
                                    <a href="/"><span>我的订单</span></a>
                                    <a href="/"><span>零钱</span></a>
                                    <a href="/"><span>我的优惠券</span></a>
                                    <a href="/"><span>我的唯品币</span></a>
                                    <a href="/"><span>唯品金融</span></a>
                                </div>


                            </div>
                        </li>
                        <li><a href="/">注册</a><span>/</span></li>
                        <li className="giftbox">
                            <a href="/"><i className="gift" />签到有礼</a><span>/</span>
                            <div className="check-ins">
                                {/* 签到的天数 */}
                                <div className="head-sign-day">
                                    <span className="solid">
                                        
                                    </span>
                                    <span className=" fristtday day">
                                    <p>1天</p>
                                    </span>
                                        <span className="day aa">
                                            <p>2天</p>
                                        </span>
                                        <span className="day aa">
                                        <p>3天</p>
                                        </span>
                                        <span className="day aa">
                                        <p>4天</p>
                                        </span>
                                        <span className="day aa">
                                        <p>5天</p>
                                        </span>
                                        <span className="day aa">
                                        <p>6天</p>
                                        </span>
                                        <span className="day lastday">
                                        <p>7天</p>
                                        </span>
                                </div>
                                {/* 签到按钮 */}
                                <a href="/" className="fl qd">每天签到送惊喜， 连续签到更享心动奖励</a>
                                <button className="fr">签到</button>
                            </div>
                          
                        </li>
                        <li><a href="/">我的订单</a><span>/</span></li>

                        <li className="salebox">
                            <a href="/">
                                我的特卖
                                <Icon type="caret-down" className="down" />
                                <Icon type="caret-up" className="up" />
                            </a>
                            <span>/</span>
                            <div className="top-nav-list">
                                <span>商品收藏</span>
                                <span>商品收藏</span>
                                <span>商品收藏</span>
                            </div>
                        </li>
                        <li className="jlbbox">
                            <a href="/">
                                会员俱乐部
                                <Icon type="caret-down" className="down" />
                                <Icon type="caret-up" className="up" />
                            </a>
                            <span>/</span>
                            <div className="top-nav-list">
                                <span>俱乐部首页</span>
                                <span>唯品币兑换</span>
                            </div>
                        </li>
                        <li className="kfbox" style={{width:'97px'}}>
                            <a href="/">
                                客户服务
                                <Icon type="caret-down" className="down" />
                                <Icon type="caret-up" className="up" />
                            </a>
                            <span style={{marginLeft:'10px'}}>/</span>
                            <div className="top-nav-list">
                                <span>联系客服</span>
                                <span>帮助中心</span>
                                <span>客服中心</span>
                                <span>知识产权投诉</span>
                            </div>
                        </li>
                        <li className="ewmbox">
                            <i className="iphone"></i><a href="/">手机版</a><span>/</span>
                            <div className="ewm">
                                <img src="https://b.appsimg.com/2016/06/17/863/1466134037230.jpg" alt=""/>
                                <p>随时逛,及时抢</p>
                            </div>
                            
                        </li>
                        <li className="morebox">
                            <a href="/">更多
                                <Icon type="caret-down" className="down" />
                                <Icon type="caret-up" className="up" />
                            </a>
                            <div className="more">
                                <div className="top">
                                    <h5>合作专区</h5>
                                    <p><a href="/">唯品卡</a></p>
                                </div>
                                    <h5>关于我们</h5>
                                    <p>
                                        <span><a href="/">Sell on vip</a></span>
                                        <span><a href="/">品牌招商</a></span>
                                        <span><a href="/">官方微博</a></span>
                                    </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
